<template>
  <div>
    <div id="c222" style="height: 180px;"></div>
  </div>
</template>
<script>
import { get } from '@/utils/request';
import moment from 'moment';
import { DualAxes } from '@antv/g2plot';


export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 100
      },
      // dualAxesData: []
      humData: []
    }
  },
  methods: {
    loadDualAxes() {
      const dualAxes = new DualAxes('c222', {
        data: [this.humData, this.humData],
        xField: 'insert_time',
        yField: ['temperature', 'humidity'],
        // animation: {
        //     appear: {
        //         animation: 'path-in', // 动画效果
        //         duration: 5000,  // 动画执行时间
        //     },
        // },
        xAxis: {
          label: {
            rotate: -45,
            style: {
              fill: "bleak",
              fontsize: 16
            }
          }
        },
        yAxis: {
          temperature: {
            min: 0,
            max: 40,
            label: {
              style: {
                fill: 'bleak'
              }
            }
          },
          humidity: {
            label: {
              style: {
                fill: 'bleak'
              }
            }
          }
        },
        legend: {
          position: 'top',
          // 设置分类图例
          itemName: {
            style: {
              fill: 'bleak'
            }
          }
        },
        point: {
          size: 5,
          shape: 'diamond',
          style: {
            fill: 'white',
            stroke: '#859',
            lineWidth: 2,
          },
        },
        geometryOptions: [
          {
            geometry: 'line',
            color: 'cyan',
          },
          {
            geometry: 'line',
            color: 'pink',
          },
        ],
      });

      dualAxes.render();
    },
    async getHumData() {
      let res = await get('/dashboard/pageQueryTodayData', this.params);
      // console.log(res, "获取响应");
      // this.dualAxesData = res.data;
      let hum = [];
      // 将后端获取的数据设置在tempData
      res.data.list.forEach((item, index, arr) => {
        // 由于刻度混乱 将第一条数据的值设置为15.4
        arr[0].humidity = 18.2;
        arr[0].temperature = 15.2;
        // item表示数组每一项
        item.insert_time = moment(item.insert_time).format("HH:mm");
        // 由于查询数据 密度密集 需要将数据处理 每隔10条数据 取一条数据
        if (index % 10 == 0) {
          hum.push(arr[index])
        }
      });

      this.humData = hum;
    }
  },
  async mounted() {
    await this.getHumData();
    this.loadDualAxes();
  }
}
</script>
<style long="less" scoped></style>
